<template>
	<view>
		<view class="main">
			<!-- 顶部商品部分 -->
			<view v-if="Object.keys(goodsInfo).length" class="evaluation-box">
				<view class="order-list-item-middle">
					<view class="order-list-item-middle-left">
						<image :src="goodsInfo.original_img" mode=""></image>
					</view>
					<view class="order-list-item-middle-right">
						<view class="name">
							{{goodsInfo.goods_name}}
						</view>
						<view class="spac">
							{{goodsInfo.spec_key_name}}
						</view>
						<view class="price">
							￥<span>{{goodsInfo.goods_price}}</span>
						</view>
					</view>
					<text class="num">x{{goodsInfo.goods_num}}</text>
				</view>
			</view>
			<!-- 中部星星部分 -->
			<view class="evaluation-star-box">
				<view class="evaluation-star-warp">
					<view class="evaluation-star-title">
						商品满意度：
					</view>
					<view class="evaluation-star">
						<u-rate :count="5" v-model="form.goods_rank" :size='28' activeColor="#ffd541" color="#d7d7d7"></u-rate>
					</view>
				</view>
			</view>
			<!-- 标签选择 -->
			<view class="tag-list">
				<view class="tag-item" :class="[form.tags_id.includes(item.id) && 'active']" v-for="(item,index) in tagList"
					:key="item.id" @click="selectTag(item.id)">
					{{item.name}}
				</view>
			</view>
			<!-- 评价文字和图片部分 -->
			<view class="uploadImgBox-box">
				<view class="uploadImgBox">
					<textarea placeholder="说点什么吧..." v-model.trim="form.content"></textarea>

					<u-upload :fileList="form.img" multiple uploadIcon="plus" width="187rpx" height="187rpx"
						@afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" />
				</view>
			</view>

			<!-- 提交按钮部分 -->
			<view class="submit-box" @click="handleSubmit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderApi,
		PrintApi
	} from '@/api'
	import {
		BASE_URL
	} from '@/config/request'
	export default {
		data() {
			return {
				orderId: 0,
				goodsId: 0,
				goodsInfo: {},
				form: {
					goods_rank: 0,
					content: '',
					img: [],
					tags_id: [],
				},
				tagList: []
			}
		},
		onLoad({
			orderId,
			goodsId
		}) {
			this.orderId = Number(orderId)
			this.goodsId = Number(goodsId)

			this.getGoodsInfo()
			this.getTagList()
		},
		methods: {
			getGoodsInfo() {
				OrderApi.UserOrderInfo({
						order_id: this.orderId
					})
					.then(res => {
						this.goodsInfo = res.goodslist.find(item => item.goods_id === this.goodsId)
					})
					.catch(err => {
						console.log('getOrderInfo', err);
						this.$showToast(err || '获取商品信息失败')
					})
			},
			getTagList() {
				OrderApi.getCommentTagsList({
						size: 9999,
						p: 1
					})
					.then(res => {
						this.tagList = res.result.rows
					})
					.catch(err => {
						console.log('getTagList', err);
						this.$showToast(err || '获取标签失败')
					})
			},
			selectTag(id) {
				const hasDataIndex = this.form.tags_id.findIndex(item => item === id)
				if (hasDataIndex === -1) {
					this.form.tags_id.push(id)
				} else {
					this.form.tags_id.splice(hasDataIndex, 1)
				}
			},
			// 删除图片
			deletePic(event) {
				this.form.img.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				try {
					this.$showLoading({
						title: '上传中'
					})
					for (const item of event.file) {
						const res = await this.uploadFile(item.url)
						this.form.img.push({
							url: res.final
						})
					}
					uni.hideLoading()
				} catch (err) {
					uni.hideLoading()
					this.$showToast(err.message)
				}
			},
			uploadFile(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: BASE_URL + 'Mini/ApiConnect/UploadRefundPic',
						filePath: url,
						name: 'refund_pic',
						formData: {
							user_id: this.$store.getters['userInfo'].user_id
						},
						success: (res) => {
							return resolve(JSON.parse(res.data).result)
						},
						fail: (err) => {
							return reject(new Error(err.msg))
						}
					});
				})
			},
			// 提交
			async handleSubmit() {
				try {
					this.$showLoading()
					await this.verifyForm()
					let form = {
						order_id: this.orderId,
						goods_rank: this.form.goods_rank,
						content: this.form.content,
						rec_id: this.goodsInfo.rec_id,
						goods_id: this.goodsId,
					}
					if (this.form.img.length) form.img = this.form.img.map(item => item.url)
					if (this.form.tags_id.length) form.tags_id = this.form.tags_id
					const res = await OrderApi.UserCommentHandle(form)
					uni.hideLoading()
					this.$showToast(res.msg || '评论成功', 2000)
					console.log('handleSubmit res', res);
					const timer = setTimeout(() => {
						uni.navigateBack()
						clearTimeout(timer)
					}, 2000)
				} catch (err) {
					console.log('handleSubmit err', err);
					uni.hideLoading()
					this.$showToast(err)
				}
			},
			// 校验
			verifyForm() {
				return new Promise((resolve, reject) => {
					if (!this.form.goods_rank)
						return reject('请选择满意度')
					if (this.form.content.trim() === '')
						return reject('请输入评价内容')
					return resolve()
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-upload__button {
		background-color: #fff !important;
	}

	.main {
		margin: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
	}

	// 提交按钮部分
	.submit-box {
		position: fixed;
		bottom: calc(30rpx + constant(safe-area-inset-bottom));
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: $gradient-bg-color;
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
	}

	// 标签
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		gap: 15rpx 15rpx;

		.tag-item {
			padding: 6rpx 15rpx;
			border-radius: 10rpx;
			border: 2rpx solid #C4C4C4;
			background-color: #ffffff;
			color: #6A6A6A;
			transition: all 0.2s;
			font-size: 24rpx;
		}

		>.active {
			border: 2rpx solid #ff9844;
			background-color: #ff9844;
			color: #fff;
		}
	}

	// 评价文字和图片部分
	.uploadImgBox-box {
		padding: 30rpx;

		.uploadImgBox {
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: #F2F2F2;
			border-radius: 12rpx;

			textarea {
				height: 150rpx;
			}

			.upload {
				.imgicon {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

			.uploaditem {
				padding-top: 30rpx;
			}
		}
	}

	// 中部星星部分
	.evaluation-star-box {
		.evaluation-star-warp {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			margin: 40rpx 30rpx 0;
			border-top: 1rpx solid #E1E1E1;

			.evaluation-star-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #1a1a1a;
			}
		}
	}

	// 顶部商品部分
	.evaluation-box {
		padding: 40rpx 0 0;

		.order-list-item-middle {
			display: flex;
			padding: 0rpx 24rpx 0;

			.order-list-item-middle-left {
				width: 178rpx;
				height: 178rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-list-item-middle-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-right: auto;
				padding-left: 20rpx;

				.name {
					margin-bottom: auto;
					font-size: 30rpx;
					font-weight: bold;
					color: #2A2A2A;
				}

				.spac {
					margin-bottom: auto;
					font-size: 26rpx;
					color: #8E8E8E;
				}

				.price {
					display: flex;
					align-items: baseline;
					margin-top: 7rpx;
					color: #f00;
					font-size: 24rpx;

					span {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.num {
				margin-left: 35rpx;
				font-size: 26rpx;
				color: #000;
			}
		}
	}
</style>